<!DOCTYPE HTML>
<html>
<head>
	<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
	<title>pixi.js example 10 Text</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	
	
	<script src="pixi.js"></script>
</head>
<body>
	<script>

  	// Load them google fonts before starting...!
	WebFontConfig = {
	  google: {
	    families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
	  },

	  active: function() {
	    // do something
	    init();
	  },
	
	};
	(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
     
    function init()
    {
    	
 
		// create an new instance of a pixi stage
		var stage = new PIXI.Stage(0x66FF99);
		
		// add a shiney background..
		var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
		stage.addChild(background);
		
		// create a renderer instance
		var renderer = PIXI.autoDetectRenderer(620, 400);
		// add the renderer view element to the DOM
		document.body.appendChild(renderer.view);
		
		requestAnimFrame( animate );
		
		// creat some white text using the Snippet webfont
		var textSample = new PIXI.Text("Pixi.js can has text!", "50px Snippet", "white");
		textSample.anchor.x = 0.5;
		textSample.position.x = 620/2;
		textSample.position.y = 10;
		
		// create a text object with a nice stroke
		var spinningText = new PIXI.Text("I'm fun!", "bold 60px Podkova", "#cc00ff", "#FFFFFF", 6);
		// setting the anchor point to 0.5 will center align the text... great for spinning!
		spinningText.anchor.x = spinningText.anchor.y = 0.5;
		spinningText.position.x = 620/2;
		spinningText.position.y = 400/2;
		
		// create a text object that will be updated..
		var countingText = new PIXI.Text("COUNT 4EVAR: 0", "bold italic 60px Arvo", "#3e1707", "#a4410e", 7);
		countingText.position.x = 620/2;
		countingText.position.y = 320;
		countingText.anchor.x = 0.5;
		stage.addChild(textSample);
		stage.addChild(spinningText);
		stage.addChild(countingText);
		count = 0;
		score = 0;
		
		function animate() {
		
		    requestAnimFrame( animate );
			count++;
			if(count == 50)
			{
				count = 0;
				score ++
				// update the text...
				countingText.setText("COUNT 4EVAR: "  + score )
			}
		    // just for fun, lets rotate the text
		    spinningText.rotation += 0.03;
			
		    // render the stage   
		    renderer.render(stage);
		}
	}
	   
	</script>

	</body>
</html>
